<template>
  <div class="yearPlanContainer">
    <div class="yearPlan">
      <div style="margin:10px 0;display: flex;justify-content: space-between;">
          <span style="font-weight: bold">产品年销售计划</span>
          <el-button type="primary" size="mini" @click="createNewYear">新建年计划</el-button>
      </div>
      <el-card style="cursor: pointer;margin:5px" @click.native="chooseyearPlanDetails(item.planTime)" v-if="item.draftId" v-for="(item,index) in thisYear" :key="index">
          <el-row>
              <el-col :span="6">
                <h3>{{item.planTime}}年   年计划</h3>
                <div style="margin-bottom: 10px;">
                    <button style="border:0px;background:orange;border-radius:20%;color:#fff">计划</button>
                </div>
                <div>
                  <span>{{item.categoryNumber}}</span>个品类,<span>{{item.productCodeNumber}}</span>个产品
                </div>
              </el-col>
              <el-col :span="4" style="text-align:center">
                <h3 style="height:13px"></h3>
                <div style="color:#19abe4;font-size:24px;margin-bottom: 10px;">{{item.adjustNumber}}</div>
                <div>调整次数</div>
              </el-col>
              <el-col :span="5" style="text-align:center">
                <h3 style="height:28px"></h3>
                <div style="margin-bottom: 10px;">{{item.newDevelopTime}}</div>
                <div>最新发布更新时间</div>
              </el-col>
              <el-col :span="5" style="text-align:center">
                <h3 style="height:13px"></h3>
                <div style="color:#9280d4;font-size:24px;margin-bottom: 10px;">{{item.yearPlanAmount/10000 | fixedTwo}}<span style="font-size: 10px;color: #999">万元</span></div>
                <div>年计划额</div>
              </el-col>
              <el-col :span="4" style="text-align:center">
                <h3 style="height:13px"></h3>
                <div style="color:#e0486e;font-size:24px;margin-bottom: 10px;">{{item.yearFinishRatio}}</div>
                <div>销售额完成度</div>
              </el-col>
          </el-row>
      </el-card>
      <div style="font-weight: bold;height:40px;margin:10px 0">
          历史计划
      </div>
      <el-card style="margin:5px;cursor: pointer" v-for="(item,indexS) in this.allYearPlanDetailsData" :key="indexS+'a'" @click.native="chooseyearPlanDetails(item.planTime)">
          <el-row>
            <el-col :span="6">
              <h3>{{item.planTime}}年   年计划</h3>
              <div style="margin-bottom: 10px;">
                <button style="border:0px;background:orange;border-radius:20%;color:#fff">计划</button>
              </div>
              <div>
                <span>{{item.categoryNumber}}</span>个品类,<span>{{item.productCodeNumber}}</span>个产品
              </div>
            </el-col>
            <el-col :span="4" style="text-align:center">
              <h3 style="height:13px"></h3>
              <div style="color:#19abe4;font-size:24px;margin-bottom: 10px;">{{item.adjustNumber}}</div>
              <div>调整次数</div>
            </el-col>
            <el-col :span="5" style="text-align:center">
              <h3 style="height:28px"></h3>
              <div style="margin-bottom: 10px;">{{item.newDevelopTime}}</div>
              <div>最新发布更新时间</div>
            </el-col>
            <el-col :span="5" style="text-align:center">
              <h3 style="height:13px"></h3>
              <div style="color:#9280d4;font-size:24px;margin-bottom: 10px;">{{item.yearPlanAmount/10000 | fixedTwo}}<span style="font-size: 10px;color: #999">万元</span></div>
              <div>年计划额</div>
            </el-col>
            <el-col :span="4" style="text-align:center">
              <h3 style="height:13px"></h3>
              <div style="color:#e0486e;font-size:24px;margin-bottom: 10px;">{{item.yearFinishRatio}}</div>
              <div>销售额完成度</div>
            </el-col>
          </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'

  export default {
    name: "yearPlan",
    components: {},
    data() {
      return {
        show:{
          historyData: true,
          detais: false,
          newYearPage: false
        },
        thisYear :[],
        nowTime: '',
        allYearPlanDetailsData: [],
        oneYearData: [],
        mainchart: [],
        twoPageTable: []
      }
    },
    mounted() {
      this.getThisYear()
      this.allYearPlanDetails()
    },
    filters:{
      fixedTwo(newVal){
        return newVal.toFixed(2)
      }
    },
    methods: {
      createNewYear() {
        this.$router.push({ name:'newYearPlan' })
      },
      deleteDraftByDraftId (draftId) {
        opreate.deleteDraftById({ draftId }).then(res => {
          this.$message.success(res.message)
        })
      },
      getThisYear() {
        let newDate = new Date()
        this.nowTime = newDate.getFullYear()
        this.getThisPlanDetail()
      },
      chooseyearPlanDetails(mineYear) {
        this.$router.push({
          name:'annualPlan',
          params: { mineYear }
        })
      },
      getThisPlanDetail() {
        opreate.getYearPlanDetail({ yearPlanTime: 0 }).then(res => {
          this.thisYear = res.data
        })
      },
      allYearPlanDetails() {
        opreate.getYearPlanDetail({}).then(res => {
          this.allYearPlanDetailsData = res.data
        })
      }
    }
  }
</script>
